<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY Gallery - SlidingLabels</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
<script src="../../../..//kissy/build/kissy.js"></script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
<style>
    form {
        width: 380px;
        padding: 20px 90px;
        background: #f7f7f7;
        border: 1px solid #ddd;
    }

    #content div {
        clear: both;
        margin: 0 0 10px;
    }

    label {
        cursor: pointer;
        display: block;
    }

    input[type="text"],
    textarea {
        width: 300px;
        border: 1px solid #999;
        padding: 5px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }

    input[type="text"]:focus {
        border-color: #777;
    }

    input[name="zip"] {
        width: 150px;
    }

    /* submit button */
    input[type="submit"] {
        cursor: pointer;
        border: 1px solid #999;
        padding: 5px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        background: #eee;
    }

    input[type="submit"]:hover,
    input[type="submit"]:focus {
        border-color: #333;
        background: #ddd;
    }

    input[type="submit"]:active {
        margin-top: 1px;
    }
</style>
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20111220",
                path:"../../../",  // cdn上适当修改对应路径
                charset:"utf-8"
            }
        ]
    });
</script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <div class="sub-title">Gallery</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>


<div id="content">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="../../../index.html">Gallery </a>
        <span>Sliding Labels</span>
    </div>
<pre class="s-section">
作者：qiaohua@taobao.com(乔花)
功能：表单label浮动功能
描述：表单各个输入项目中, 如果有label的话, 可以很方便地放在输入框上方, 当点击时移开label;
源码：<a href="sliding-labels.js">sliding-labels.js</a></pre>

    <h3 class="s-title">Demo</h3>
    <div class="s-section">
    	<div class="s-demo">
	        <form action="../" method="post" id="info">
	            <div id="name-wrap" class="slider">
	                <label for="name">Name</label>
	                <input type="text" id="name" name="name"/>
	            </div>
	            <!--/#name-wrap-->
	
	            <div id="email-wrap" class="slider">
	                <label for="email">E&ndash;mail</label>
	                <input type="text" id="email" name="email"/>
	            </div>
	            <!--/#email-wrap-->
	
	            <div id="url-wrap" class="slider">
	                <label for="url">URL</label>
	                <input type="text" id="url" name="url"/>
	            </div>
	            <!--/#url-wrap-->
	
	            <div id="comment-wrap" class="slider">
	                <label for="comment">Comment</label>
	                <textarea cols="53" rows="10" id="comment"></textarea>
	            </div>
	            <!--/#comment-wrap-->
	
	            <input type="submit" id="btn" name="btn" value="submit">
	        </form>
	
	        <script>
	            KISSY.use('gallery/sliding-labels/1.0/index', function(S, SL) {
                    // 1.2.0
                    new SL('#info', {
	                    blurStyle: {
	                        color: '#aaa'
	                    },
	                    focusStyle: {
	                        color: '#000'
	                    }
	                });
	            });
	        </script>
    	</div>        
        <a class="s-view-code" href="demo.html#">显示源码</a>
    </div>
    <h3 class="s-title">API</h3>
    <div class="s-section">
        <h4 class="s-api-title">方法</h4>
        <div class="s-api-method">new SlidingLabels( trigger, config )</div>
        <h4 class="s-api-title">参数</h4>
        <div class="s-api-params">
            <ul class="s-list">
                <li>{String} [ <em>trigger</em> = '#info' ] 触发元素</li>
                <li>{String} [ <em>config</em> = '{} ] 配置项, 见下:</li>
            </ul>
        </div>

        <h4 class="s-api-title">配置项</h4>
        <div class="s-api-params">
            <ul class="s-list">
                <li>{Array} [ <em>position</em> = [5, 5] ] px, 水平和垂直方向上, 相对于父元素的位置, x or [x, y], 不设置时, 取 [5, 5]</li>
                <li>{Number} [ <em>offset</em> = 5 ] label 和 input 之间的偏移距离, 默认为 5</li>
                <li>{Number} [ <em>zIndex</em> = 99 ] zIndex, 默认为 99</li>
                <li>{Number} [ <em>duration</em> = 0.2 ] 动画速度, 默认为 0.2</li>
                <li>{Object} [ <em>focusStyle</em> = {} ] 输入框获取焦点时, label 的样式, 默认为 undefined</li>
                <li>{Object} [ <em>blurStyle</em> = {} ] 输入框失去焦点时, label 的样式, 默认为 undefined</li>
            </ul>
        </div>

        <h4 class="s-api-title">返回</h4>
        <div class="s-api-return">Object</div>
    </div>

    <h3 class="s-title">Note</h3>
    <div class="s-section">
        <ul class="s-list">
            <li>目前只需要初始化, 没有其他方法支持.</li>
        </ul>
    </div>
</div>
<div id="footer">
    &copy; Copyright 2010~2011, KISSY Team.
</div>

</body>
</html>
